<template>
    <div class="import">
        <p class="importaccount">
            <i class="iconfont icon-daoruzhangdan-"></i>
            <span class="text">导入账单</span>

            <span class="import" @click.stop.prevent="msgImport">从短信中导入</span>
        </p>
        <p class="voiceimport">
            <i class="iconfont icon-yuyinshuru2"></i>
            <span class="text">语音导入</span>

            <span class="import" @click.stop.prevent="voiceImport">动动你的嘴巴导入</span>
        </p>
    </div>
</template>
<script>
export default {
    methods: {
        msgImport() {
            this.$emit("msgImport");
        },
        voiceImport() {
            this.$emit("voiceImport");
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../style/vars.scss";
.import {
    display: flex;
    flex: 1; 
    flex-direction: column; // 设置轴方
    justify-content: center;
    p {
        display: flex;
        padding: 15px;
        border-bottom: 1px solid $background-color10;
        margin: -3px;
        i{
            margin-top: -1px;
            margin-right: 10px;
            vertical-align: middle; 
            color: $background-color2;
            font-size: 18px;
        }
        span{
            vertical-align: middle;
        }
        span.text{
            color: $background-color2;
        }
        .import {
            text-align: right;
            cursor: pointer;
            color: $background-color10;
        }
    }
}
</style>

